<!--
 * @Description: 微课打卡页面
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-06-05 21:29:33
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-06-09 16:01:32
--> 
<template>
  <div class="lesson-wrap">
    <span class="total-class">已经听了{{dataList.length}}节课</span>
    <div class="border-line"></div>
    <div class="lesson">
      <template v-for="(item, i) in dataList" >
        <div class="lesson-card" :key="i">
          <img :src="item.thumbnail" alt='课程图片'>
          <div class="lesson-cont">
            <p class="class-name">{{item.seminar_name}}</p>
            <p></p>
            <p>课程时长： {{item.audio_time}}</p>
          </div>
        </div>        
      </template>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataList: []
    }
  },
  methods: {
    initData(serviceId) {
      this.$api.order.service
        .getSeminarRecord(serviceId)
        .then(res => {
          this.dataList = res.data
        }).catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
.lesson-wrap {
  padding: 0 20px;
}
.total-class {
  font-weight: 600;
  font-size: 16px;
  color: #3a3a3a;
}
.border-line {
  width: 100%;
  height: 2px;
  background: #cccccc;
  margin: 10px 0
}
.lesson {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 5px 0 0 10px;
}
.lesson-card {
  box-sizing: border-box;
  padding: 10px;
  height: 100px;
  width: 270px;
  box-shadow: 1px 1px 5px 2px #ccc;
  margin: 15px 0px;
  margin-right: 35px;
  background: #e2e2e2;
}
.card-active {
  background: #fff
}
.lesson-card img {
  width: 80px;
  height: 80px;
  float: left;
}
.lesson-card .lesson-cont {
  padding-left: 100px;
}
.lesson-cont p {
  height: 20px;
  color:#333
}
.lesson-cont .class-name {
  height: 40px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word; 
  word-wrap: break-word;
  font-weight: 600;
  line-height: 20px;
}
</style>
